<template>
  <div>
    <div class="whiteBac mt10 p10">
      <el-form :inline="true" :model="searchForm" ref="searchForm" size="mini">
        <el-row :gutter="10">
          <el-col :sm="12" :xs="12" >
            <el-form-item>
              <el-input placeholder="请输入内容" v-model="searchForm.usersTypeCount" class="input-with-select">
                <el-select v-model="searchForm.usersType" style="width: 120px;" slot="prepend" placeholder="请选择">
                  <el-option label="用户手机" value="user_account"></el-option>
                  <el-option label="海贝昵称" value="nickname"></el-option>
                  <el-option label="mt4账号" value="mt4_account"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="12" :xs="12" >
            <el-form-item label="审批状态" label-width="70px">
              <el-select placeholder="请选择审批状态" v-model="searchForm.examinationType" style="width:180px">
                <el-option label="全部"  value=""></el-option>
                <el-option label="待审核" value="0"></el-option>
                <el-option label="通过" value="1"></el-option>
                <el-option label="拒绝" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :sm="12" :xs="12">
            <el-form-item label="申请时间" label-width="70px">
              <el-date-picker
                v-model="searchForm.applyTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :sm="12" :xs="12">
            <el-form-item label="审批时间" label-width="70px">
              <el-date-picker
                v-model="searchForm.examinationTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :sm="24" :xs="24">
            <el-button type="primary" size="small" @click="queryOrderList(1);">查询</el-button>
            <el-button size="small" @click="resetForm">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="whiteBac mt20 p10">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="order_num"
          label="申请编号">
        </el-table-column>
        <el-table-column
          width="110px"
          prop="user_account"
          label="用户手机">
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="海贝昵称">
        </el-table-column>
        <el-table-column
          prop="mt4_account"
          label="MT4账号">
        </el-table-column>
        <el-table-column
          prop="goods_num"
          label="消费商品编号"
          width="110px"
        >
        </el-table-column>
        <el-table-column
          prop="goods_name"
          label="消费商品名称"
          width="110px"
        >
        </el-table-column>
        <el-table-column
          prop="integral"
          label="花费积分">
        </el-table-column>
        <el-table-column
          prop="receiving_address"
          label="配送地址">
        </el-table-column>
        <el-table-column
          prop="create_time"
          width="160px"
          label="申请时间">
        </el-table-column>
        <el-table-column
          label="审批状态">
          <template slot-scope="scope">
            <span>{{scope.row.audit_status==='0'?'待审核':((scope.row.audit_status==='1')?'通过':'拒绝')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="150px"
          label="审批说明">
          <template slot-scope="scope">
            <div class="lh20 break">{{scope.row.memo}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="audit_time"
          label="审批时间">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.audit_status==='0'" type="text" @click="handleExamination(scope.row.id)">审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt10 tc">
        <page-pagination :page="page" :pageSize="pageSize" :total="total" v-on:pageFun="handleCurrentChange"></page-pagination>
      </div>
    </div>
    <!--发布弹窗 begin-->
    <el-dialog width="40%" title="发布推送" :visible.sync="dialogFormVisible">
      <el-form :model="examinationForm" :rules="rules" ref="examinationForm" label-width="80px" label-position="left">
        <el-form-item label="审批状态" prop="examinationType">
          <el-radio-group v-model="examinationForm.examinationType" size="medium">
            <el-radio border label="1">通过</el-radio>
            <el-radio border label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批说明" prop="desc">
          <el-input type="textarea" v-model="examinationForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="">
          <div class="light-grey">通过前，请先前往贵司CRM系统扣除用户相应积分</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" :disabled="isDisabled" @click="examination('examinationForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--发布弹窗 end-->
  </div>

</template>

<script>
  import service from '@/service/index'
  import {  } from '@/base/utils'
  import pagePagination from '@/components/AG_Common/pagePagination.vue'
  export default {
    data(){
      return{
        tableData:[],
        dialogFormVisible:false,
        currentId:'',
        isDisabled:false,
        searchForm:{
          usersTypeCount:'',
          usersType:'user_account',
          examinationType:'',
          applyTime:[],
          examinationTime:[]
        },
        examinationForm:{
          examinationType:'1',
          desc:''
        },
        rules:{
          examinationType:[
            { required: true, message: '请选择审批状态', trigger: 'change' }
          ],
          desc:[
            { min: 1, max: 140, message: '长度在 1 到 140 个字符', trigger: 'blur' }
          ]
        },
        total:0,
        pageSize:10,
        page:1,
        paramsAll:{}
      }
    },
    mounted(){
      this.queryOrderList(1);
    },
    components:{
      pagePagination
    },
    methods:{
      handleCurrentChange(val){
        this.queryOrderList(val);
      },
      queryOrderList(page=1){
        let params = {
          audit_status:this.searchForm.examinationType,
          create_time_begin:this.searchForm.applyTime?this.searchForm.applyTime[0]:'',
          create_time_end:this.searchForm.applyTime?this.searchForm.applyTime[1]:'',
          mt4_account:this.searchForm.usersType=='mt4_account'?this.searchForm.usersTypeCount:'',
          nickname:this.searchForm.usersType=='nickname'?this.searchForm.usersTypeCount:'',
          user_account:this.searchForm.usersType=='user_account'?this.searchForm.usersTypeCount:'',
          audit_time_begin:this.searchForm.examinationTime?this.searchForm.examinationTime[0]:'',
          audit_time_end:this.searchForm.examinationTime?this.searchForm.examinationTime[1]:'',
          page:page,
          pageSize:this.pageSize
        }
        //console.table((params),'--------');
        service.haiBeiServerQueryOrderList(params).then(res => {
          if (res.success) {
            this.page = res.result.page;
            this.total = res.result.nums;
            this.tableData = res.result.pageList;
            //this.$message({type:'success', message:res.msg});
          }else{
            this.$message({type:'error', message:res.msg});
            return;
          }
        });
      },
      handleExamination(id){
        //审批
        this.currentId = id;
        this.dialogFormVisible = true;
      },
      examination(formName){
        //弹窗审批
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.examinationForm.examinationType=='2') {
              if(this.examinationForm.desc===''){
                this.$message({type:'error', message:'请输入审批说明'});
                return;
              }
            }
            let params = {
              id:this.currentId,
              status:this.examinationForm.examinationType,
              memo:this.examinationForm.desc
            }
            this.isDisabled = true;
            service.haiBeiServerAuditUserOrder(params).then(res => {
              if (res.success) {
                this.$message({type:'success', message:res.msg});
                setTimeout(()=>{
                  this.isDisabled = false;
                },1000);
                this.queryOrderList(1);
                this.examinationForm.examinationType='1';
                this.examinationForm.desc = '';
                this.dialogFormVisible = false;
              }else{
                this.$message({type:'error', message:res.msg});
                this.isDisabled = false;
                return;
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(){
        this.searchForm.usersTypeCount='';
        this.searchForm.usersType='user_account';
        this.searchForm.examinationType='';
        this.searchForm.applyTime='';
        this.searchForm.examinationTime='';
      }
    }
  }
</script>

<style scoped>

</style>
